<template>
  <div>
    <h1>{{ obj.msg }}</h1>
    <!-- 轮播图 -->
    <div class="slider_wrap">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for='item in obj.slider_contents'>
            <h2>{{ item.title }}</h2>
            <img :src="item.url" alt="">
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>



<script>
//通过import，引入swiper的js和css

import '../../node_modules/swiper/dist/css/swiper.min.css'
import '../../node_modules/swiper/dist/js/swiper.js'
//在export default中进行初始化
export default {
  name: 'carouselfigure',
  data () {
    return {
      obj:{
        msg: '精彩图片',
        slider_contents:[
          // {
          //   name: '泰山骑行速降',
          //   src:'http://dimg04.c-ctrip.com/images/700o0e00000078jfz723E_1920_340_17.jpg'
          // }, 
          // {
          //   name: '黄浦江徒步',
          //   src:'http://dimg04.c-ctrip.com/images/700l0f0000007964365FB_1920_340_17.jpg'
          // }, 
          // {
          //   name: '黄山越野跑',
          //   src:'http://dimg04.c-ctrip.com/images/700k09000000487lo2636_1920_340_17.jpg'
          // }, 
          // {
          //   name: '郑开马拉松',
          //   src:'http://dimg04.c-ctrip.com/images/700p0e00000072uoeA5EF_1920_340_17.jpg'
          // }
        ]
      }
      
    }
  },
  beforeCreate () {

  },
  mounted () {
    var _self=this;
    var mySwiper;
    var domainName = "http://www.wangry.com:3001";
    $.get(domainName+"/lunbo",{type:"1",index:"1"},function(result){
      console.log(result,_self.obj.slider_contents);
      _self.obj.slider_contents = result;
      setTimeout(function(){
        mySwiper = new Swiper('.swiper-container', {
          autoplay: 2000,//可选选项，自动滑动
          loop: true,
          pagination : '.swiper-pagination', // 分页器
          paginationClickable :true,
        });
      }, 0);
    });
    
    

  }
}
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-size: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.slider_wrap{
  width: 100%;
  background-color: #eee;
}
.swiper-wrapper,.swiper-slide{
  width: 100%;
  text-align: center;
}
.swiper-slide h2{
  font-size: 45px;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}
.swiper-slide img{
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  .swiper-slide h2{
    font-size: 20px;
  }
  h1,.img_show_wrap h1{
    font-size: 15px;
  }
}
</style>
